<template>
  <div class="channel">
    <van-popup v-model="show" position="bottom" :style="{ height: '80%' }">
      <!-- 我的频道 -->
      <van-cell title="我的频道">
        <template #default>
          <van-button
            type="danger"
            round
            plain
            size="mini"
            @click="cross = !cross"
            >{{ cross === false ? "编辑" : "完成" }}</van-button
          >
        </template>
      </van-cell>
      {{ active }}
      <van-grid>
        <van-grid-item
          @click="changeChannel(index)"
          class="itemf"
          v-for="(item, index) in channelList"
          :key="index"
        >
          <template #text>
            <span class="myword" :class="{ active: active === index }">{{
              item.name
            }}</span
            ><van-icon
              @click="delChannel(index)"
              v-if="cross && index !== 0"
              name="clear"
              class="items"
            />
          </template>
        </van-grid-item>
      </van-grid>
      <!-- 推荐频道 -->
      <van-cell title="频道推荐"></van-cell>
      <van-grid>
        <van-grid-item
          @click="addChannel(item)"
          class="itemf"
          v-for="(item, index) in tuijianChannel"
          :key="index"
          :text="item.name"
        ></van-grid-item>
      </van-grid>
    </van-popup>
  </div>
</template>

<script>
import { apiAllChannel, processChannel } from '@/api/channel.js'
import { localSet } from '@/utils/mylocal.js'
export default {
  props: ['channelList', 'active'],
  data () {
    return {
      show: false,
      cross: false,
      // 所有频道数据
      allChannel: []
    }
  },
  created () {
    this.getAllChannel()
  },
  methods: {
    // 获取数据
    async getAllChannel () {
      const res = await apiAllChannel()
      window.console.log('所有频道数据', res)
      this.allChannel = res.data.data.channels
    },
    // 添加频道
    async addChannel (item) {
      // 添加额外属性
      this.$set(item, 'articleList', [])
      this.$set(item, 'loading', false)
      this.$set(item, 'finished', false)
      this.$set(item, 'isLoading', false)
      // 将item添加到我的频道中
      this.channelList.push(item)
      // 得到token
      const token = this.$store.state.userInfo.token
      // 判断用户是否登录
      if (!token) {
        // 未登录：将修改后的频道数据保存到本地localstoreage
        localSet(this.channelList, 'channels')
      } else {
        // 已登录
        // 得到接口所需的数据结构[{ id: '频道的id', seq: '频道的顺序' }]
        // 由于推荐频道不能操作,因为它永远是第一个,所以需要将频道从数据源中+1
        var newArr = this.channelList.slice(1).map((item, index) => {
          return {
            id: item.id,
            seq: index + 2
          }
        })
        await processChannel(newArr)
      }
    },

    // 删除频道
    async delChannel (index) {
      // 将下标为 index 的元素从数组中删除
      this.channelList.splice(index, 1)
      // 保存操作之后数据
      // 用户的登录信息
      const token = this.$store.state.userInfo.token
      // 判断用户是否登录
      if (!token) {
        // 保存到本地
        localSet(this.channelList, 'channels')
      } else {
        // 提交到服务器
        // 生成频道数据
        var newArr = this.channelList.slice(1).map((item, index) => {
          return {
            id: item.id,
            seq: index + 2
          }
        })
        await processChannel(newArr)
      }
    },

    // 改变选中的频道
    changeChannel (index) {
      // 本能直接在子组件中修改父组件中传入的内容
      // 应将index提交到父组件中,在父组件中修改
      this.$emit('update:active', index)
    }
  },
  computed: {
    // 定义一个计算属性
    tuijianChannel () {
      // 得到我的频道的数据的id
      const ids = this.channelList.map(item => {
        return item.id
      })
      // 遍历所有频道数据
      const newArr = this.allChannel.filter(item => {
        return !ids.includes(item.id)
      })
      // 返回新数组
      return newArr
    }
  }
}
</script>

<style lang="less" scoped>
.itemf {
    position: relative;
    .items {
        position: absolute;
        top: 0;
        right: 0;
        color: #666;
        font-size: 12px;
    }
    .myword {
        color: #646566;
        font-size: 12px;
    }
    .active {
      color: red;
    }
}
</style>
